<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		#imfdiv img{
			width: 100px;
			height: 100px;
		}
		*{
			margin: 0px;
			padding: 0px;
		}
		#bigdiv{
			width: 100%;
			height: 600px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		#zjdiv{
			width: 600px;
			height: 500px;
			display: flex;
			align-items: center;
			overflow: hidden;
		}
		#imfdiv {
			display: flex;
			width: 1600px;
			height: 100px;
		}
			
		</style>
	</head>
	<body>
		<div id="bigdiv">
			<div id="zjdiv">
				<div id="imfdiv">
					<img src="img/1.jpeg" >
					<img src="img/2.jpeg" >
					<img src="img/3.jpeg" >
					<img src="img/4.jpeg" >
					<img src="img/5.jpeg" >
					<img src="img/6.jpeg" >
					<img src="img/7.jpeg" >
					<img src="img/8.jpeg" >
					<img src="img/9.jpeg" >
					<img src="img/10.jpeg">
					<img src="img/1.jpeg" >
					<img src="img/2.jpeg" >
					<img src="img/3.jpeg" >
					<img src="img/4.jpeg" >
					<img src="img/5.jpeg" >
					<img src="img/6.jpeg" >
					
 				</div>
			</div> 
		</div>
	</body>
	<script type="text/javascript">
		var imgobj = document.getElementById('imfdiv');
		var marginleft = 0 ;
		onload = function(){
			setInterval(function(){
				marginleft--;
				imgobj.style.marginLeft=marginleft+'px';
				if(marginleft==-1000){
					marginleft=0;
				}
			},10)
		}
	</script>
</html>
